$(function() { // on dom ready
	var elesJson = {
		nodes: [ 
			{data: {id: 'a', name: 'A', width: 10, height: 10, color: '#9981df'}, position: {x: 234, y: 456}},
			{data: {id: 'b', name: 'B', width: 10, height: 10, color: '#CCCC33', href: 'http://www.baidu.com'}},
			{data: {id: 'c', name: 'C', width: 10, height: 10, color: '#33CC33'}},
			{data: {id: 'd', name: 'D', width: 10, height: 10, color: '#FFFF00'}},
			{data: {id: 'e', name: 'E', width: 10, height: 10, color: '#e8aa8f'}},
			{data: {id: 'f', name: 'F', width: 10, height: 10, color: '#e8aa8f'}},
			],

		edges: [
			{data: {id: 'ae', name: 'AE', width: 1, color: '#fff', source: 'a', target: 'e'}},
			{data: {id: 'ab', name: 'AB', width: 1, color: '#fff', source: 'a', target: 'b'}},
			{data: {id: 'be', name: 'BE', width: 1, color: '#fff', source: 'b', target: 'e'}},
			{data: {id: 'bc', name: 'BC', width: 1, color: '#fff', source: 'b', target: 'c'}},
			{data: {id: 'ce', name: 'CE', width: 1, color: '#fff', source: 'c', target: 'e'}},
			{data: {id: 'cd', name: 'CD', width: 1, color: '#fff', source: 'c', target: 'd'}},
			{data: {id: 'de', name: 'DE', width: 1, color: '#fff', source: 'd', target: 'e'}},
			{data: {id: 'ef', name: 'EF', width: 1, color: '#fff', source: 'e', target: 'f'}}
			]
	};

	cy = cytoscape({
		container: $("#cy"),
		
		style: cytoscape.stylesheet().selector('node').css({
			'content': 'data(name)',
			'text-valign': 'center',
//			'background-color': '#ff0000',
			'background-color': 'data(color)',
			'width': 'data(width)',
			'height': 'data(height)',
		}).selector('edge').css({
			'width': 'data(width)',
			'line-color': 'data(color)',
			'target-arrow-color': '#F2B1BA',
			'target-arrow-shape': 'circle',
			'opacity': 0.8
		}).selector(':selected').css({
			'background-color': '#00ff00',
			'line-color': 'black',
			'target-arrow-color': 'yellow',
			'source-arrow-color': 'black',
			'opacity': 0.5
		}).selector('.faded').css({
			'opacity': 0.25,
			'text-opacity': 1
		}),

		elements: elesJson,

		layout: {
			name: 'cose-bilkent', //circle, cose-bilkent
			padding: 10
		},

		ready: function() {
			// ready 1
		}
	});
/*
	cy.on('tap', 'node[id = "a"]', function(evt) {
		// alert("hi~");
		 addNode();
	});
	
	cy.on('tap', 'node[id = "b"]', function(){
	  try {
	    window.open( this.data('href') );
	  } catch(e){
	    window.location.href = this.data('href'); 
	  } 
	});
*/	
	cy.on('tap', 'node', function(evt) {
		tapNode(evt);
	});
	
}); // on dom ready


function tapNode(evt) {
	console.info(evt);
	var url = "/ss";
	var data = "nodeId="+ evt.cyTarget.id();
	$.ajax({
		type: "GET",
		url: url,
		data: data,
		success: function(data) {
			console.info("tapNode - ajax.")
			console.info(data);
			addNode(data);
		}
	});
	
}

function addNode(data){
	var ele = eval('(' + data + ')');
	console.info(data);
	cy.add(ele);
/*	cy.add([
		{data: {id: 'f', name: 'F', width: 20, height: 20, color: '#0000ff'}, position: {x: 150, y: 150} }
		]);*/
}